<script lang="ts" setup name="AddList">
import { ref } from 'vue'
import { useFormRules } from '@g/hooks/use-rules'
import type { addFormData, addFormParams } from '../interface'
import {
  addList,
  editList,
  getListById
} from '@/MainApp/apis/manage-design'
import '../design.scss'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: '新建表单'
  },
  editData: {
    type: Object,
    default: () => null
  },
  listData: {
    type: Object,
    default: () => null
  }
})
const emits = defineEmits<{
  (event: 'cancel'): void
  (event: 'update:visible', value: boolean): void
  (event: 'confirm'): void
}>()
const { msgSuccess, msgError } = useMessage()
const { t } = useConfig()
const { lenContent, lenName } = useLength()
const dVisible = ref(props.visible)
const addNameFormRef = ref()
const addNameForm = ref<addFormData>({})
const addFormVisible = ref(false)
const addListDesigner = ref()
const addNameRules = useFormRules([
  {
    key: 'name',
    required: true,
    trigger: 'blur',
    msg: '请输入名称'
  }
])
let editListData: any = null
watch(
  () => props.visible,
  async visible => {
    if (visible) {
      if (props.editData) {
        const { data, success } = await getListById(props.editData.id)
        if (success) {
          addNameForm.value = { ...data }
          editListData = JSON.parse(data.json)
        }
      }
      else {
        addNameForm.value = {}
      }
    }
    dVisible.value = visible
  }
)
onUpdated(async () => {
  if (!addFormVisible.value && props.editData)
    addListDesigner.value?.setFormJson(editListData)

  if (!addFormVisible.value)
    addListDesigner.value?.clearDesigner()
})
const handCancel = () => {
  dVisible.value = false
  addFormVisible.value = false
  addListDesigner.value?.clearDesigner()
  emits('update:visible', false)
}
const handClosed = () => {
  dVisible.value = false
  addFormVisible.value = false
  addListDesigner.value?.clearDesigner()
  emits('cancel')
  handCancel()
}
const handConfirm = async () => {
  addFormVisible.value = true
}
const handAddClosed = () => {
  addNameForm.value = {}
  addFormVisible.value = false
}

const addFormConfirm = async () => {
  const data = await addNameFormRef.value.validate((valid: boolean) => {
    if (valid)
      return true
    else return false
  })
  if (data) {
    const formJson = addListDesigner.value.getFormJson()

    const params: addFormParams = {
      scaffoldType: 'LIST',
      scaffoldTypeName: '列表',
      ...addNameForm.value,
      json: JSON.stringify(formJson)
    }
    if (props.editData)
      params.id = props.editData.id

    if (props.listData)
      params.moduleId = props.listData.id

    const { success, msg } = props.editData
      ? await editList(params)
      : await addList(params)
    if (success) {
      emits('confirm')
      addNameForm.value = {}
      dVisible.value = false
      addFormVisible.value = false
      addListDesigner.value?.clearDesigner()
      msgSuccess(msg)
    }
    else {
      msgError(msg)
    }
  }
}
</script>

<template>
  <el-dialog
    v-model="dVisible"
    class="form-design"
    :title="props.editData ? '编辑列表' : '新建列表'"
    width="99%"
    top="10px"
    :close-on-click-modal="false"
    :append-to-body="true"
    @closed="handClosed"
  >
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handCancel">{{ t("action.cancel") }}</el-button>
        <el-button type="primary" @click="handConfirm">
          {{ t("action.sure") }}
        </el-button>
      </span>
    </template>
    <v-form-designer ref="addListDesigner" :is-page="true" />
  </el-dialog>
  <el-dialog
    v-model="addFormVisible"
    title="添加名称描述"
    width="600px"
    draggable
    :close-on-click-modal="false"
    :append-to-body="true"
    @closed="handAddClosed"
  >
    <el-form
      ref="addNameFormRef"
      :model="addNameForm"
      :rules="addNameRules"
      label-width="120px"
    >
      <el-row>
        <el-col :span="24" class="elcol">
          <el-form-item label="名称" prop="name">
            <el-input
              v-model.trim="addNameForm.name"
              clearable
              :maxlength="lenName"
              show-word-limit
              placeholder="请输入名称"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24" class="elcol">
          <el-form-item label="描述" prop="description">
            <el-input
              v-model.trim="addNameForm.description"
              :rows="2"
              :maxlength="lenContent"
              show-word-limit
              type="textarea"
              placeholder="请输入描述"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handCancel">取消</el-button>
        <el-button type="primary" @click="addFormConfirm"> 确认 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
.manage-design {
  padding: 15px;

  .elcolTitle {
    padding: 15px;
    border-bottom: 1px solid #e5e5e5;
    margin-bottom: 15px;

    .projectTitle {
      font-size: 16px;
      font-weight: 400;
      color: #333;
      padding-left: 10px;
      border-left: 5px solid #409eff;
    }
  }

  .dataTable {
    padding: 15px;
  }
}
</style>
